<template>
  <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close" :destroy-on-close="true" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true">
    <div class="project-container">
      <div class="customer-header">
        <div class="info">
          <!--          <svg-icon icon-class="cp-people" class="logo"></svg-icon>-->
          <el-image :src="appointmentImage" style="width:60px; height: 60px;font-size: 55px; float: left; margin-right: 15px;"></el-image>
          <div class="content" :title="model.projectname" v-if="model.projectname">
            <p>
              <b style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 52%;">{{ model.projectname }}</b>
            </p>
            <p class="light" v-if="model.projectmanager">
              <span>项目经理：{{ model.projectmanager }}</span>
              <span>创建时间：{{ formatDate(model.projectcreateon) }}</span>
            </p>
          </div>
        </div>
        <div class="toolbar" style="margin-top: 10px;">
          <!--          <tl-attachment ref="appointmentTemplate" sourceType="MpmProjectAppointmentGenerate" :sourceId="model.id" :disabled="disableAttachment" :editable="true" :btnTitle="'任命书'"></tl-attachment>-->
          <appointment-attachment style="padding-right: 10px" ref="appointmentTemplate" :previewMode="false" sourceType="MpmProjectAppointmentGenerate" :sourceId="model.id" :disabled="disableAttachment" :editable="false" :btnTitle="'任命书'"></appointment-attachment>
          <tl-attachment ref="attachmentRef" sourceType="MpmProjectAppointment" :sourceId="model.id" :disabled="disableAttachment" :editable="false" :is-display-default-element="false">
            <el-button type="text" :disabled="disableAttachment" icon="el-icon-paperclip" @click="$refs.attachmentRef.openUploadDialog()">{{ this.$refs.attachmentRef ? this.$refs.attachmentRef.btnTitle : '' }} [{{ this.$refs.attachmentRef ? (this.$refs.attachmentRef.fileList.length > 0 ? this.$refs.attachmentRef.fileList.length : this.$refs.attachmentRef.fileCount) : 0 }}] </el-button>
          </tl-attachment>
          <el-button type="text" @click="$refs.history.visible = true" :disabled="disableApprovalHistory"> <svg-icon icon-class="list" />审批历史 </el-button>
          <el-button type="danger" size="small" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
        </div>
      </div>
      <div class="project-nav" :style="{ height: mainHeight + 'px' }">
        <ul class="nav-list">
          <template v-for="(item, index) in navList">
            <li :key="item.code" v-if="model.id || index === 0" :class="item.on ? 'on' : ''" @click="clickNav(item.code)" style="cursor: pointer;clear: both">
              <span style="float: left;width: 100px">{{ item.name }}</span>
              <span style="float: left;">
                <i v-if="item.count > 0">{{ item.count }}</i>
                <label v-if="item.flag">{{ item.flag }}</label>
              </span>
            </li>
          </template>
        </ul>
      </div>
      <div class="project-main" :style="{ height: mainHeight + 'px' }">
        <el-scrollbar class="customer-main-container" id="customerMainContainer">
          <div style="padding:0 10px">
            <!--            <el-alert title="请填写任命书信息，任命项目组后，再点击办理通过！" type="warning" show-icon :closable="false">-->
            <!--            </el-alert>-->
            <a id="basic" class="step-position">&nbsp;</a>
            <div>
              <div class="tl-form-line-title">
                基本信息
              </div>
              <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="true">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="变更内容" prop="changecontent" v-if="!model.syspush || model.syspush !== '1'">
                      <el-input type="textarea" show-word-limit maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" v-model="model.changecontent" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="变更原因" prop="changereason" v-if="!model.syspush || model.syspush !== '1'">
                      <el-input type="textarea" show-word-limit maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" v-model="model.changereason" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="任命书标题" prop="appointmenttitle" :rules="rules.validateRequire">
                      <el-input v-model="model.appointmenttitle" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="任命书编号" prop="appointmentnumber">
                      <el-input v-model="model.appointmentnumber" placeholder="系统自动生成" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="签发人" prop="signercode" :rules="rules.validateRequire">
                      <tl-ref-user v-model="model.signercode" :initDisplayData.sync="model.signername" dataType="code" :singleSelect="true"> </tl-ref-user>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="任命书描述" prop="appointmentdescription" :rules="rules.validateRequire">
                      <el-input v-model="model.appointmentdescription" type="textarea" show-word-limit maxlength="1000" :rows="8"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Sponsor" prop="sponsorcode">
                      <tl-ref-user v-model="model.sponsorcode" :initDisplayData.sync="model.sponsor" dataType="code" :singleSelect="true"> </tl-ref-user>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Owner" prop="ownercode">
                      <tl-ref-user v-model="model.ownercode" :initDisplayData.sync="model.owner" dataType="code" :singleSelect="true"> </tl-ref-user>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="顾问" prop="advisercode">
                      <tl-ref-user v-model="model.advisercode" :initDisplayData.sync="model.adviser" dataType="code" :singleSelect="true"> </tl-ref-user>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目经理" prop="projectmanagercode">
                      <tl-ref-user v-model="model.projectmanagercode" :initDisplayData.sync="model.projectmanager" dataType="code" :singleSelect="true"> </tl-ref-user>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <a id="core" class="step-position" v-if="model.id > 0 && teamTypeArr.length > 0">&nbsp;</a>
            <div v-if="model.id > 0">
              <div class="tl-form-line-title">
                工作组
              </div>
              <div v-if="teamTypeArr.length === 0">
                <tl-line :ref="'line123'" :parentId="model.id" :projectCode="model.projectcode" :editable="!disableSave && !disableEditSubmit" :title="''"></tl-line>
              </div>
              <div v-else>
                <tl-line :ref="'line' + index" :key="index" :editable="false" :teamType="item.id" :pre-team-type="item.description" :parentId="model.id" :projectCode="model.projectcode" :title="item.teamname" :grouptype="item.grouptype" :typeapptype="item.appointmenttype" v-for="(item, index) in teamTypeArr">
                  <template slot="after-title">
                    <span v-if="item.appointmenttype === '2'">已撤销</span>
                  </template>
                  <template slot="left-btn">
                    <el-button style="padding: 0; margin: 0 5px" type="text" :disabled="true" v-if="false" icon="el-icon-remove-outline" size="medium" @click="deleteTeamType(item.id, index)">
                      删除工作组
                    </el-button>
                    <el-button style="padding: 0; margin: 0 5px" type="text" :disabled="true" v-if="false" icon="el-icon-edit-outline" size="medium" @click="editTeamType('teamTypeForm', item.id, item.grouptype)">
                      编辑工作组
                    </el-button>
                  </template>
                </tl-line>
                <div style="margin: 20px 0; width: 100%; height: 50px; text-align: center">
                  <el-button type="text" v-if="false" icon="el-icon-circle-plus-outline" size="medium" @click="openTeamTypeForm('teamTypeForm', 0)">
                    新增工作组
                  </el-button>
                </div>
              </div>
            </div>
            <a id="apply" class="step-position">&nbsp;</a>
            <div>
              <div class="tl-form-line-title">
                单据申请信息
              </div>
              <el-form class="tl-form" ref="form1" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit || disableSave">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="申请人姓名" prop="applyusername" :rules="rules.validateRequire">
                      <el-input v-model="model.applyusername" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请人工号" prop="applyusercode">
                      <el-input v-model="model.applyusercode" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="申请人部门" prop="applydeptname">
                      <el-input v-model="model.applydeptname" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请人公司" prop="applyorgname">
                      <el-input v-model="model.applyorgname" :disabled="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div style="float: right; margin-top: 20px;">
              <tl-approval-history ref="history" sourceType="MpmProjectAppointment" :sourceId="model.id" />
            </div>
          </div>
        </el-scrollbar>
      </div>
      <teamType ref="teamTypeForm" :parentId="model.id" :projectCode="model.projectcode" :haveMoreTypeThree="haveMoreTypeThree" :haveMoreTypeTwo="haveMoreTypeTwo" @insertArr="insertArrFunc" @refreshTable="doRefreshTable" @loadTeamTypeList="loadTeamTypeList" @refreshTeam="refreshTeam"></teamType>
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
import { validateNull } from '@tapui/utils/validate'
/** 子组件 */
import tlLine from '../mpmProjectTeam/indexComp'
import teamType from '../mpmProjectTeamType/editComp'
import MpmProjectTeamType from '../mpmProjectTeamType/index'
import AppointmentAttachment from './appointAttachment'
import appointment from '/static/images/paojectManager/appointmentnew.png'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: { tlLine, teamType, MpmProjectTeamType, AppointmentAttachment },
  data() {
    return {
      moduleTitle: '项目任命',
      urlPrefix: '/mpm/projectAppointment/',
      url: {
        // 额外的url
        teamTypeList: '/mpm/projectTeamType/list',
        deleteTeamType: '/mpm/projectTeamType/delete',
        generateAppointment: '/mpm/projectAppointment/generateAppointment',
        addGroupType: '/mpm/projectTeamType/addTemplateGroup'
      },
      activeTabName: 'basic',
      isRefreshLine: false,
      size: '95%',
      navList: [{ name: '基本信息', count: 0, flag: null, on: true, code: 'basic' }, { name: '工作组', count: 0, flag: null, on: false, code: 'core' }, { name: '单据申请信息', count: 0, flag: null, on: false, code: 'apply' }],
      mainHeight: 100,
      teamTypeArr: [],
      // 审批节点配置的额外参数
      extraParam: '',
      // 判断是否是审批组件调用
      fromApproval: '',
      appointmentImage: appointment
    }
  },
  watch: {
    // "model.id": {
    //   handler: function (newVal, oldVal) {
    //     if (newVal && newVal > 0) {
    //       this.loadTeamTypeList()
    //     }
    //   }
    // }
  },
  computed: {
    haveMoreTypeThree() {
      return this.teamTypeArr.length > 0 && this.teamTypeArr.filter((item) => item.grouptype === 3).length > 1
    },
    haveMoreTypeTwo() {
      return this.teamTypeArr.length > 0 && this.teamTypeArr.filter((item) => item.grouptype === 2).length > 1
    }
  },
  methods: {
    formatDate(date) {
      return formatDate(new Date(date ? date.toString().replace(/\-/g, "/") : date), "yyyy-MM-dd HH:mm")
    },
    assignDefaultValue() {
      if (this.isAdd) {
        this.$set(this.model, 'docdate', new Date())
        this.$set(this.model, 'applyorgcode', this.org.code)
        this.$set(this.model, 'applyorgname', this.org.name)
        this.$set(this.model, 'applydeptcode', this.dept.code)
        this.$set(this.model, 'applydeptname', this.dept.fullname)
        this.$set(this.model, 'applyusercode', this.user.code)
        this.$set(this.model, 'applyusername', this.user.name)
        this.$set(this.model, 'usercode', this.user.code)
        this.$set(this.model, 'username', this.user.name)
      }
    },
    loaded() {
      // 页面加载完毕执行
      this.activeTabName = 'basic'
      this.isRefreshLine = false
      this.loadTeamTypeList()
      if (!this.isAdd) {
        if (this.teamTypeArr.length === 0) {
          this.$refs.line123.doQuery()
          this.$refs.line123.initPage()
        }
      }
    },
    close() {
      this.id = 0
      this.teamTypeArr = []
      this.model = {}
    },
    open() {
      this.model = {}
      this.$set(this.model, 'id', this.id === '' ? 0 : this.id)
      this.$set(this.model, 'projectcode', '0')
      this.navList.forEach(function(item, index) {
        if (index === 0) {
          item.on = true
        } else {
          item.on = false
        }
      })
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        if (this.isAdd === true) {
          this.title = '新增' + this.moduleTitle
          // 需要添加重复判断
          if (this.$store.getters.param.isAvoidRepeat === true) {
            this.queryBillUid()
          }
          if (this.isQueryInitData === true) {
            // 后台进行数据初始化
            this.queryInitData().then((_) => {
              this.assignDefaultValue()
              this.loaded()
            })
          } else {
            // 前台进行数据初始化
            this.$set(this.model, 'enabled', 1)
            this.$set(this.model, 'sortcode', 0)
            this.assignDefaultValue()
            this.loaded()
          }
        } else if (this.disableEditSubmit === false) {
          this.title = '编辑' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.loaded()
          })
        } else {
          this.title = '查看' + this.moduleTitle
          this.queryData(this.id).then((_) => {
            this.loaded()
          })
        }
      })
      this.datas = []
      // 页面加载完毕执行
      this.resizeHandler()
      this.$nextTick(() => {
        this.mainScrollElement = document.getElementById('customerMainContainer').getElementsByClassName('el-scrollbar__wrap')[0]
        this.onMainScroll()
      })
    },
    tabClick(tab) {
      if (tab.name === 'line') {
        if (!this.model.id) {
          this.$nextTick((_) => {
            this.activeTabName = 'basic'
          })
          this.$tap
            .confirm('当前数据未保存，是否立即保存数据？')
            .then((_) => {
              this.doSubmitEdit()
            })
            .catch((_) => {})
        } else if (!this.isRefreshLine) {
          this.$refs.line.doQuery()
          this.isRefreshLine = true
        }
        this.$refs.line.initPage()
      }
    },
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    // 点击左侧导航
    clickNav(code) {
      this.navList.forEach((m) => {
        if (m.code === code) {
          m.on = true
        } else {
          m.on = false
        }
      })
      let element = document.getElementById(code)
      if (element === null) return
      let goY = element.getBoundingClientRect().y - 75
      this.mainScrollElement.scrollTop += goY
    },
    resizeHandler() {
      this.mainHeight = document.body.getBoundingClientRect().height - 250
    },
    // 页面滚动时，动态改变左侧导航选中的元素
    onMainScroll() {
      this.mainScrollElement.addEventListener('scroll', () => {
        let currentTop = this.mainScrollElement.scrollTop
        let code = ''
        for (let element of document.getElementsByClassName('step-position')) {
          if (element.getBoundingClientRect().y >= 0) {
            code = element.id
            break
          }
        }
        this.navList.forEach((m) => {
          if (m.code === code) {
            m.on = true
          } else {
            m.on = false
          }
        })
      })
    },

    // 打开新增项目组界面
    openTeamTypeForm(editForm, id) {
      this.$refs[editForm].isAdd = true
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
    },
    /** 提交后执行 */
    afterSubmit() {
      this.$emit('refresh')
    },
    /** 列表数据加载开始 */
    loadTeamTypeList() {
      if (!this.url.teamTypeList) {
        this.$tap.alert('请设置teamTypeList地址!', 'warning')
        return
      }
      let params = { appointmentId: this.model.id, projectCode: this.model.projectcode }
      let that = this
      // 数据查询
      this.loading = true
      getAction(this.url.teamTypeList, params)
        .then((res) => {
          if (res.success) {
            this.teamTypeArr = res.result.dataList
            // setTimeout(() => {
            //   for (let i = 0; i < res.result.dataList.length ? res.result.dataList.length : 0; i++) {
            //     if (that.$refs && that.$refs['line' + i]) {
            //       that.$refs['line' + i][0].doQuery()
            //       that.$refs['line' + i][0].initPage()
            //     }
            //   }
            // }, 100)
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    insertArrFunc(model) {
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].id === model.id) {
          this.teamTypeArr.splice(i, 1)
        }
      }
      let temp = true
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].sortcode > model.sortcode) {
          temp = false
          this.teamTypeArr.splice(i, 0, model)
          break
        }
      }
      if (temp) {
        this.teamTypeArr.push(model)
      }
    },
    doRefreshTable(model) {
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].id === model.id && this.teamTypeArr[i].sortcode === model.sortcode) {
          this.$refs['line' + i][0].doQuery()
          this.$refs['line' + i][0].initPage()
        }
      }
    },
    deleteArrFunc(model) {
      let temp = false
      let index = 0
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].id === model.id) {
          temp = true
          index = i
        }
      }
      if (temp) {
        this.teamTypeArr.splice(index, 1)
      }
    },
    /** 删除团队类型 */
    deleteTeamType(id, index) {
      if (!this.url.deleteTeamType) {
        this.$tap.alert('请设置deleteTeamType地址!', 'warning')
        return
      }
      this.$tap
        .confirm('删除任命组将会同时删除任命组成员，确定删除任命组吗？')
        .then((_) => {
          deleteAction(this.url.deleteTeamType, { ids: id }).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              // this.deleteArrFunc({ id: id })
              this.loadTeamTypeList()
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    },
    /** 打开编辑团队类型对话框 */
    editTeamType(editForm, id, grouptype) {
      this.$refs[editForm].id = id
      this.$refs[editForm].isAdd = false
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
      this.$refs[editForm].grouptype = grouptype
    },
    /** 生成任命书 */
    generateAppoint() {
      let param = {
        appointmentnumber: this.model.appointmentnumber,
        projectname: this.getProjectName(),
        appointmentdescription: this.model.appointmentdescription,
        signercode: this.model.signername,
        appointmentid: this.model.id,
        sslist: [{ ss: this.model.sponsor, ssc: this.model.sponsorcode, ssn: 'Sponsor' }, { ss: this.model.owner, ssc: this.model.ownercode, ssn: 'Owner' }, { ss: this.model.projectmanager, ssc: this.model.projectmanagercode, ssn: 'PM' }],
        tablelist: []
      }
      if (this.model.advisercode && this.model.adviser) {
        param.sslist.push({ ss: this.model.adviser, ssc: this.model.advisercode, ssn: '顾问' })
      }
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].appointmenttype === '2') {
          continue
        }
        param.tablelist[i] = {}
        param.tablelist[i].table = this.$refs['line' + i][0].datas
        param.tablelist[i].name = this.teamTypeArr[i].teamname
      }
      // 过滤tablelist中空值（撤销项目组）
      param.tablelist = param.tablelist.filter(item => !validateNull(item))
      this.$tap
        .confirm('确定生成任命书吗？')
        .then((_) => {
          postAction(this.url.generateAppointment, param).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.$refs.appointmentTemplate.queryCount()
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    },
    getProjectName() {
      let projectname = ''
      if (this.model.projectname.endsWith('项目')) {
        projectname += this.model.projectname
      } else {
        projectname += this.model.projectname
        projectname += '项目'
      }
      return projectname
    },
    saveCourierInfo(resolve, reject) {
      const { id, appointmenttitle, appointmentnumber, signercode, signername, appointmentdescription } = this.model
      if (!appointmenttitle || !signercode || !signername || !appointmentdescription) {
        this.$tap.alert('请填写任命书相关信息并任命项目组成员!', 'warning')
        reject()
      }
      const param = {
        id,
        appointmenttitle,
        appointmentnumber,
        signercode,
        signername,
        appointmentdescription
      }
      putAction(this.url.edit, param)
        .then((res) => {
          if (res.success) {
            resolve()
          } else {
            this.$tap.alert(res.message, 'warning')
            reject()
          }
        })
        .catch((err) => {
          this.$tap.alert('保存任命书信息失败，请联系系统管理员', 'warning')
          reject()
        })
    },
    refreshTeam(model) {
      for (let i = 0; i < this.teamTypeArr.length; i++) {
        if (this.teamTypeArr[i].id === model.id) {
          this.$refs['line' + i][0].doQuery()
          this.$refs['line' + i][0].initPage()
        }
      }
    }
  },
  created() {
    window.addEventListener('resize', this.resizeHandler)
  }
}
</script>
<style scoped lang="scss">
/deep/.el-drawer {
  padding: 0 15px;
}
/deep/ .el-drawer__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: auto;
  border-top: 1px solid rgb(232, 232, 232);
}
/deep/ .tl-table .el-table__empty-block {
  text-align: center !important;
}
/deep/ .el-table__empty-block {
  min-height: 60px;
  text-align: center;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
}
/deep/ .el-icon-remove-outline {
  color: #0a6ed2 !important;
}
/deep/ .el-icon-edit-outline {
  color: #0a6ed2 !important;
}
/deep/ .el-scrollbar__thumb {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(144, 147, 153, 0.3);
  -webkit-transition: 0.3s background-color;
  transition: 0.3s background-color;
  margin-left: 10px;
}
</style>
